<template>
	<view class="container">
		<view class="canvas-y">
			<canvas :style="{ width: canvasInfo.canvasW + 'px', height: canvasInfo.canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
		</view>
		<screenTextScroll v-if="tuangou=='-1'" :list="listgoumai"></screenTextScroll>
		<view class="carousel" :style="{ height: screenWidth + 'px' }">
			<swiper autoplay="true" indicator-active-color="#2AAC34" interval="5000" duration="400" indicator-dots circular="true">
				<swiper-item class="swiper-item" v-for="(item, index) in goods.imgList" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<view class="text-2-cut " style="font-size: 36rpx;font-weight: bold; line-height: 50rpx;color: #333333;width: 686rpx;">{{ goods.title }}</view>

			<view class="flex align-start justify-between padding-top-sm">
				<view class="text-cut" style="width: 580rpx;font-size: 28rpx;line-height: 40rpx;color: #8D8E99;">{{ goods.description }}</view>
				<view class="flex">
					<!-- <view @click="toFavorite" style="text-align: center;">
						<image src="../../static/product/collect.png" mode="aspectFit" style="width: 42rpx;height: 42rpx;"></image>
						<view style="font-size: 20rpx;line-height: 28rpx;padding-top: 10rpx;">收藏</view>
					</view> -->
					<view @click="shareShowTap" style="text-align: center;padding-left: 40rpx;padding-right: 6rpx;">
						<image src="../../static/product/share.png" mode="aspectFit" style="width: 42rpx;height: 42rpx;"></image>
						<view style="font-size: 20rpx;line-height: 28rpx;padding-top: 10rpx;">分享</view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-between ">
				<view class="">
					<view class="flex align-center">
						<view class="text-green" style="font-size: 40rpx;line-height: 56rpx;font-weight: 600;">￥{{ goods.stockDto.price / 100 }}</view>
						<view class="bg-gradual-orange margin-left-sm" v-if="zhekou >= 0" style="border-radius: 4rpx;padding: 0 8rpx;line-height: 34rpx;font-size: 24rpx;">
							{{ zhekou }}折
						</view>
					</view>
					<view style="font-size: 28rpx;color: #8D8E99;line-height: 40rpx;text-decoration: line-through;padding: 10rpx;">
						￥{{ goods.originalPrice / 100 }}/{{ goods.unit }}
					</view>
				</view>
				<view style="font-size: 28rpx;color: #8D8E99;line-height: 40rpx;">{{ goods.stockDto.sales }}人购买</view>
			</view>
		</view>


		<view class="c-list" style="padding: 0 34rpx 0 30rpx;">
			<view v-if="couponList.length > 0" @click="toggleMask('show')" class="c-row">
				<text class="tit">优惠券</text>
				<text class="con t-r" style="font-size: 28rpx;line-height: 40rpx;color: #FE9F43;">领取优惠券</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row" style="align-items: flex-start;">
				<text class="tit">配送费用</text>
				<view v-if="goods.freightTemplate && goods.freightTemplate.freightTemplateDO.defaultFreePrice == 0" class="con-list">全场免运费</view>
				<view v-else class="con-list">
					<text>单笔购买满¥{{ goods.freightTemplate.freightTemplateDO.defaultFreePrice / 100.0 }}元免邮费</text>
					<text v-if="goods.freightTemplate.freightTemplateDO.defaultContinueMoney > 0">
						每增加{{ goods.freightTemplate.freightTemplateDO.defaultFirstNum }}件，增加运费¥{{ goods.freightTemplate.freightTemplateDO.defaultContinueMoney / 100.0 }}元
					</text>
					<text v-if="goods.freightTemplate.freightTemplateCarriageDOList.length > 0">TODO 特殊情况说明页面</text>
				</view>
			</view>
			<!-- <view class="c-row b-b">
				<text class="tit">规格</text>
				<text class="con t-r ">{{goods.unit}}</text>
			</view> -->
			<view v-for="(item, index) in goods.attributeList" :key="index" class="c-row">
				<text class="tit">{{ item.attribute }}</text>
				<view class="bz-list con">
					<text>{{ item.value }}</text>
				</view>
			</view>
		</view>

		<!-- 评价 -->
		<view v-if="goods.appraisePage && goods.appraisePage.items.length > 0" class="eva-section">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>({{ goods.appraisePage.items.length }})</text>
				<text @click="navAllAppraise" class="tip">全部评论</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="goods.appraisePage.items[0].userAvatarUrl ? goods.appraisePage.items[0].userAvatarUrl : '/static/user/touxiang-@2x.png'"
				 mode="aspectFill"></image>
				<view class="right">
					<text class="name">
						{{ goods.appraisePage.items[0].userNickName ? goods.appraisePage.items[0].userNickName : '用户' + goods.appraisePage.items[0].userId }}
					</text>
					<text class="con">{{ goods.appraisePage.items[0].content }}</text>
					<view class="bot">
						<text class="attr">购买类型：{{ goods.appraisePage.items[0].skuTitle }}</text>
						<text class="time">{{ timeFormat(goods.appraisePage.items[0].gmtCreate) }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 拼团 -->
		<view class="pintuan" v-show="showPintuan && pintuanList.length > 0">
			<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" :vertical="true">
				<swiper-item v-for="item in pintuanList">
					<view class="pintuanitem">
						<image :src="item.img == -1 ? '../../static/user/touxiang-@2x.png' : item.img" mode=""></image>
						<view class="ttx">{{ shezhi(item.userName) }}</view>
						<view class="tet">
							<view class="fey">
								还差
								<text style="color: #36B542;">{{ jisuan(item.minNum, item.num) }}</text>
								人拼成
							</view>
							<view class="txm"></view>
						</view>
						<view class="btn" @click="showPinzu(item)">参与拼团</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="detail-desc padding-lr">
			<view class="text-black padding-tb-lg " style="line-height: 50rpx;font-size: 36rpx;font-weight: bold;">商品详情</view>
			<rich-text style="font-size: 28rpx;" class="mee" :nodes="goods.detail"></rich-text>
		</view>


		<view class="bg-white flex align-end" style="position: fixed;bottom: 0;width: 750rpx;height: 98rpx;padding-left: 38rpx;box-shadow: 0 0 8rpx 0 #eee;">
			<view @click="navCart" class="flex align-end" style="width: 346rpx;height: 98rpx;padding-bottom: 16rpx;">
				<view style="position: relative;" v-show="!showPintuan">
					<image src="../../static/tab-icon/tab3_2.png" mode="aspectFit" style="width: 56rpx;height: 52rpx;"></image>
					<view v-if="cartNum" class="badge round">{{ cartNum }}</view>
				</view>
				<!-- <view class="" v-show="showPintuan"><lxc-count @handleCount="handleCountClick" :index="1" :value="num" :delayed="100" :max='goods.stockDto.stock'></lxc-count></view> -->
				<view style="font-size: 28rpx;line-height: 40rpx;color: #8D8E99;padding-left: 40rpx;" v-show="!showPintuan">已选{{ cartNum }}件</view>
			</view>
			<!-- <view v-if="goods.stockDto.stock!=0" @click="addCart" style="" class="faqipintuan">{{ car }}</view> -->
			<!-- <view v-if="goods.stockDto.stock==0" @click="addkucun" style="" class="kucunbu">库存不足</view> -->
			<view class="bottom">
				<view class="bottom-item" @click="jump('/pages/index/indexs')">
					<image class="bottom-item-icon" src="../../static/home.png" mode="widthFix"></image>
					<text>首页</text>
				</view>
				<view class="bottom-item" style="margin-left: 60rpx;" @click="jump('/pages/cart/cart')">
					<image class="bottom-item-icon" src="../../static/cart.png" mode="widthFix"></image>
					<text>购物车</text>
					<view class="number">
						<text>{{cartNum}}</text>
					</view>
				</view>
				<view class="bottom-right">
					<view v-if="goods.stockDto.stock!=0" @click="addCart" style="" class="submit">{{ car }}</view>
					<view v-if="goods.stockDto.stock==0" @click="addkucun" style="" class="submit">库存不足</view>
				</view>
			</view>
		</view>

		<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view @click="obtainCoupon(index)" class="coupon-item" v-for="(item, index) in couponList" :key="index">
					<view class="con">
						<view class="left">
							<text class="title">{{ item.title }}</text>
							<text v-if="item.gmtEnd" class="time">在{{ item.gmtEnd }}前有效。 可领{{ item.limit }}张，已领{{ item.nowCount }}张</text>
							<text v-if="!item.gmtEnd" class="time">在领取后{{ item.days }}天内有效。可领{{ item.limit }}张，已领{{ item.nowCount }}张</text>
						</view>
						<view class="right">
							<text class="price">{{ item.discount / 100.0 }}</text>
							<text>满{{ item.min / 100.0 }}可用</text>
						</view>
						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<text class="tips">{{ item.categoryTitle ? '限' + item.categoryTitle + '可用' : '全品类可用' }}</text>
				</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<view class="mask" :class="shareShow === 0 ? 'none' : shareShow === 1 ? 'show' : ''" @click="toggleMask1">
			<view class="mask-content bg-white" style="z-index: 999999;" @click.stop.prevent="stopPrevent">
				<view class="flex align-center justify-center" style="padding: 60rpx 0 50rpx 0;">
					<image src="../../static/line.png" mode="aspectFit" style="width: 100rpx;height: 2rpx;"></image>
					<view style="padding: 0 12rpx 0 16rpx;font-size: 30rpx;line-height: 42rpx;color: #333333;">分享至</view>
					<image src="../../static/line.png" mode="aspectFit" style="width: 100rpx;height: 2rpx;"></image>
				</view>
				<view class="solid-bottom flex flex-wrap" style="margin: 0 44rpx 0 42rpx;">
					<view @click="share('miniwechat')" style="margin:0 auto">
						<button open-type="share" class="round" style="width: 88rpx;height: 88rpx;padding: 0;">
							<image class="round" src="../../static/login/weixindefuben@3x.png" mode="aspectFit" style="width: 88rpx;height: 88rpx;"></image>
						</button>
						<view style="text-align:center;font-size: 24rpx;line-height: 34rpx;color: #999999;padding-top: 26rpx;">微信</view>
					</view>
				</view>
				<view @click="toggleMask1" class="flex justify-center align-center" style="padding: 34rpx 0 24rpx;font-size: 30rpx;line-height: 42rpx;color: #333333;">取消</view>
			</view>
		</view>

		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image v-if="goods.img" :src="selectedSku.img ? selectedSku.img : goods.img"></image>
					<view class="right">
						<text class="price">¥{{ isVip ? selectedSku.vipPrice / 100.0 + ' [VIP]' : selectedSku.price / 100.0 }}</text>
						<text class="stock">库存：{{ selectedSku.stock }}件</text>
						<view class="selected">
							已选：
							<text>{{ selectedSku.title }}</text>
						</view>
					</view>
				</view>
				<view class="attr-list">
					<!-- <text>规格</text> -->
					<view class="item-list">
						<text v-for="(skuItem, skuIndex) in goods.skuList" :key="skuIndex" class="tit" :class="{ selected: skuIndex === selectedSkuIndex }"
						 @click="selectSpec(skuItem, skuIndex)">
							{{ skuItem.title }}
						</text>
					</view>
				</view>
				<button class="btn" @click="toggleSpec">完成</button>
			</view>
		</view>
		<!-- 拼团组 -->
		<view class="msge" v-show="showZu">
			<view class="dingwei" @click="showZu = false">
				<image src="../../static/close.png" mode=""></image>
			</view>
			<view class="txt">参与{{ shezhiTwo(pintuanitem.userName) }}的拼团</view>
			<view class="typ">
				仅剩
				<text style="color: #36B542;">{{ jusuanTwo(e1, e2) }}</text>
				个，{{ time(pintuanitem.gmtCreate) }}后结束
			</view>
			<view class="imageList">
				<view class="meyt">
					<image :src="pintuanitem.img == -1 ? '../../static/user/touxiang-@2x.png' : pintuanitem.img" mode=""></image>
					<view class="ding">拼主</view>
				</view>

				<image src="../../static/jia.png" mode=""></image>
			</view>
			<view class="but" @click="goPintuan">参与拼团</view>
		</view>
		<view class="meng" v-show="showZu"></view>
		<view class="loading" v-show="showLoading">
			<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/6a193dbaa2c64c4daa66a6ce2193b211.gif" mode=""></image>
		</view>
		<view class="popup" v-if="show" @click="show = false">
			<view class="popup-main" :style="{height:height+'rpx'}">
				<button type="default" class="btn" open-type="share">
					<image src="../../static/weixin.png" mode="aspectFill"></image>
					<text>微信好友</text>
				</button>
				<button type="default" class="btn" @click="shareShowTaps">
					<image src="../../static/bao.png" mode="aspectFill"></image>
					<text>生成海报</text>
				</button>
			</view>
		</view>
		<!-- <cards :num="cartNum"></cards> -->
	</view>
</template>

<script>
	import screenTextScroll from '@/components/p-screenTextScroll/screenTextScroll.vue';
	import uParse from '@/components/u-parse/u-parse.vue';
	import lxcCount from '@/components/lxc-count/lxc-count.vue';
	import * as config from '@/config'
	// import cards from './cards.vue'
	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			uParse,
			lxcCount,
			screenTextScroll
			// cards
		},
		data() {
			return {
				shareImg: '',
				show: 0,
				options: {},
				from: false,
				success: false,
				canvasInfo: {
					shopSrc: 'http://p15.qhimg.com/t01d9b8a732291b5ae0.png',
					price: 9.97,
					original: 100.88,
					shopImg: {},
					src: '',
					canvasW: 0,
					canvasH: 0,
					SystemInfo: {},
					headerImg: {},
					laiImg: {},
					seckillImg: {},
					buttonImg: {}

				},
				listgoumai: [],
				num: 1,
				pintuanitem: '',
				pintuanList: [{
						name: '黄晓明'
					},
					{
						name: '刘亦菲'
					},
					{
						name: '彭于晏'
					}
				],
				showZu: false,
				goods: {
					freightTemplate: undefined,
					skuList: [],
					categoryList: [],
					appraisePage: undefined
				},
				showLoading: true,
				isVip: false,
				specClass: 'none',
				specSelected: [],
				selectedSku: {},
				selectedSkuIndex: -1,
				toggleCallback: undefined,
				maskState: 0, //优惠券面板显示状态
				couponList: [],
				submiting: false,
				cartNum: 0,
				shareShow: 0,
				zhekou: -1,
				screenWidth: '',
				car: '加入购物车',
				// 拼团
				showPintuan: false,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				curStartTime: '2019-07-31 08:00:00',
				day: '0',
				hour: '00',
				min: '00',
				second: '00',
				tuangou: 0,
				yaoqingma: '',
			};
		},
		onShow() {
			var that = this
			this.init()
			// if (uni.getStorageSync('userInfo') == '') {
			// 	if (!this.success) {
			// 		uni.navigateTo({
			// 			url: '../public/login'
			// 		})
			// 		console.log(11111);
			// 	}
			// }
			uni.removeStorageSync('faPintuan');
			this.isVip = this.$api.isVip();
			let c = uni.getStorageSync('Pintuan');
			if (c == 1) {
				this.showPintuan = true;
				this.car = '发起拼团';
				this.wholesale();
			} else {
				this.showPintuan = false;
				this.car = '加入购物车';
			}

			that.$api
				.request('activity', 'inviteBuyingInfo', failres => {
					that.logining = false;
					that.$api.msg(failres.errmsg);
				})
				.then(res => {

					that.yaoqingma = res.data.p;
					console.log('获取邀请码', that.yaoqingma);

				});
		},
		// onHide() {
		// 	uni.removeStorageSync('Pintuan')
		// },
		onBackPress() {
			uni.removeStorageSync('Pintuan');
		},
		computed: {
			...mapState(['storageId'])
		},
		onUnload() {
			this.$store.commit('setTest', false)
		},
		onLoad(options) {
			if (options.scene) {
				this.from = true
				this.options = options.scene
			} else {
				this.from = false
				this.options = options
			}
		},
		async onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			console.log('12111', this.yaoqingma)

			return {
				title: (this.goods.groupShop ? '立即拼团-' : '好货分享-') + this.goods.title,
				path: '/pages/product/detail?yaoqingma=' + this.yaoqingma + '&id=' + this.goods.id + '&s=' + this.storageId + (
					this.goods.groupShop ?
					'&gid=' + this.goods.groupShop.id : ''),
				imageUrl: this.shareImg
			}
		},
		
		methods: {
			jump(url) {
				uni.switchTab({
					url
				})
			},
			isCanvas() {
				this.$api
					.request(
						'goods',
						'wxShareInfo', {
							spuId: this.goods.id
						}
					)
					.then(res => {
						if (res.data.wxShareUrl) {
							this.shareImg = res.data.wxShareUrl
						} else {
							this.scCanvas()
						}
					});
			},
			async scCanvas() {
				try {
					const ctx = await this.submit()
					let {
						tempFilePath
					} = await this.getImg(ctx)
					if (!tempFilePath || tempFilePath === '<Undefined>') {
						tempFilePath = await this.getImg(ctx)
					}
					const imageUrl = await this.uploadImage(tempFilePath);
					this.saveImg(imageUrl)
					this.shareImg = imageUrl
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},
			saveImg(url) {
				this.$api
					.request(
						'goods',
						'saveWxShareInfo', {
							spuId: this.goods.id,
							url
						}
					)
					.then(res => {});
			},
			init() {
				debugger
				let [yaoqingma, id, gid] = ['', '', '']
				const {
					options,
					from
				} = this
				if (from) {
					const arr = decodeURIComponent(options).split('&')
					console.log("获取到的传值为", arr)
					// const arr = "c=andox9&id=185&s=26&gid=".split('&')	
					const info = {}
					arr.forEach(el => {
						const spli = el.split('=')
						if (spli.length > 1) {
							info[spli[0]] = spli[1]
						}
					})
					yaoqingma = info.c
					id = info.id
					gid = info.gid ? info.gid : ''
					this.$store.commit('setStorage', info.s)
					this.$store.commit('setTest', true)
				} else {
					yaoqingma = options.yaoqingma
					id = options.id
					gid = options.gid ? options.gid : ''
					if (options.s) {
						this.$store.commit('setStorage', options.s)
					}
				}
				console.log("获取到的邀请码时", yaoqingma)
				// decodeURIComponent
				//判断是否登录
				if (uni.getStorageSync('userInfo') == '') {
					this.success = true
					if (from) {
						console.log('yaoqingma------', yaoqingma)
						uni.navigateTo({
							url: '/pages/public/login?scene=' + yaoqingma
						});
						return
					} else {
						console.log('yaoqingma------2222')
						uni.navigateTo({
							url: '/pages/public/login?scene=' + yaoqingma
						});
						return
					}
				} else {
					console.log("wwwww")
				}

				if (options.tuangou == '-1') {
					this.tuangou = options.tuangou
					this.getgundong(options)
				}
				const that = this;
				uni.getSystemInfo({
					success: function(res) {
						console.log(res.screenWidth);
						that.screenWidth = res.screenWidth;
					}
				});
				uni.showLoading({
					title: '正在加载'
				});


				that.$api
					.request(
						'goods',
						'getGoodsByStorage', {
							spuId: id,
							groupShopId: gid,
							storageId: this.storageId
						},
						failres => {
							that.$api.msg(failres.errmsg);
							// console.log(this.goods);
							uni.hideLoading();


						}
					)
					.then(res => {
						console.log("=================", res.data)
						that.goods = res.data;
						this.canvasInfo.shopSrc = res.data.imgList[0]
						this.canvasInfo.price = res.data.stockDto.price / 100
						this.canvasInfo.original = res.data.originalPrice / 100
						// console.log(that.goods);
						that.zhekou = ((res.data.stockDto.price / res.data.originalPrice) * 10).toFixed(1);
						// that.zhekou = ((30/90)*10).toFixed(1)
						if (that.goods.groupShop) {
							//若存在团购信息，将价格更新到团购价格
							that.goods.price = that.goods.groupShop.minPrice;
							that.goods.vipPrice = that.goods.groupShop.minPrice;
							//更新各个SKU的价格
							for (let i = 0; i < that.goods.skuList.length; i++) {
								for (let j = 0; j < that.goods.groupShop.groupShopSkuList.length; j++) {
									if (that.goods.skuList[i].id === that.goods.groupShop.groupShopSkuList[j].skuId) {
										that.goods.skuList[i].price = that.goods.groupShop.groupShopSkuList[j].skuGroupShopPrice;
										that.goods.skuList[i].vipPrice = that.goods.groupShop.groupShopSkuList[j].skuGroupShopPrice;
									}
								}
							}
						}
						console.log('库存', this.goods.stockDto.stock);
						// console.log(that.goods.groupShop.minPrice);
						if (this.showPintuan == true) {
							this.goods.stockDto.price = this.goods.stockDto.groupPrice;
						}
						console.log(that.goods);
						uni.hideLoading();
						setTimeout(() => {
							that.showLoading = false
						}, 500)
						this.isCanvas()

					});
				//3.5接口改造中 暂时屏蔽
				// that.$api.request('coupon', 'getObtainableCoupon').then(res => {
				// 	that.couponList = res.data
				// })

				this.countCart();
			},
			getImg(ctx) {
				return new Promise((resolve, reject) => {
					//发送给后端的附加参数
					ctx.draw(false, (ret) => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							width: 350,
							height: 280,
							complete: function(res) {
								// console.log("步骤一", res.tempFilePath)
								resolve(res)
							},
						})
					}, this)
				});
			},
			uploadImage: function(file) {
				return new Promise((resolve, reject) => {
					//发送给后端的附加参数
					const url = `${config.def().baseUrl}upload/admin`
					uni.uploadFile({
						url,
						filePath: file,
						name: 'file',
						success({
							data,
							statusCode
						}) {
							if (statusCode === 200) {
								resolve(JSON.parse(data).url)
							} else {
								reject(statusCode);
							}
						},
						fail() {
							reject('网络链接错误');
						}
					});
				});
			},
			async submit() {
				const _this = this
				this.canvasInfo.SystemInfo = await this.getSystemInfo();
				this.canvasInfo.headerImg = await this.getImageInfo(
					'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/ee1e7e44befd45f09c3c82cfba7feafa.png');
				this.canvasInfo.laiImg = await this.getImageInfo(
					'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/7d7f8cdaef624e249423a58e61de8064.png');
				this.canvasInfo.shopImg = await this.getImageInfo(this.canvasInfo.shopSrc);
				this.canvasInfo.seckillImg = await this.getImageInfo(
					'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/e4463a0b85164e2591db915e2ef57c31.png');
				this.canvasInfo.buttonImg = await this.getImageInfo(
					'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/04f661e0c4464f9a9df7f60e4994ef8e.png')
				this.canvasInfo.canvasW = 350;
				this.canvasInfo.canvasH = 280;
				if (this.canvasInfo.laiImg.errMsg == 'getImageInfo:ok' && this.canvasInfo.SystemInfo.errMsg ==
					'getSystemInfo:ok') {
					var ctx = uni.createCanvasContext('myCanvas', this);
					const grd = ctx.createLinearGradient(0, 0, 200, 300)
					grd.addColorStop(0, '#B5E46E')
					grd.addColorStop(1, '#69CB33')
					ctx.setFillStyle(grd);
					ctx.fillRect(0, 0, this.canvasInfo.canvasW, this.canvasInfo.canvasH)
					ctx.drawImage(this.canvasInfo.laiImg.path, 101, 0, 148, 32)
					ctx.rect(15, 55, 321, 210)
					ctx.setFillStyle('#FFFFFF')
					ctx.fill()
					ctx.drawImage(this.canvasInfo.headerImg.path, 16, 40, 320, 35.9)
					ctx.drawImage(this.canvasInfo.shopImg.path, 25, 80, 164, 164)
					ctx.drawImage(this.canvasInfo.seckillImg.path, 200, 80, 118, 35)
					ctx.setFontSize(18)
					ctx.setFillStyle('#36B542')
					ctx.font = 'normal bold 18px STHeiti';
					const yText = '￥'
					const yTextWidth = ctx.measureText(yText).width;
					ctx.setFontSize(40)
					const priceText = this.canvasInfo.price.toString();
					const priceTextWidth = ctx.measureText(priceText).width;
					console.log(priceTextWidth)
					ctx.setFontSize(18)
					const sumWidth = yTextWidth + priceTextWidth
					const ls = (167 - sumWidth) / 2
					ctx.fillText(yText, 180 + ls - 10, 160)
					ctx.setFontSize(40)
					ctx.fillText(priceText, 180 + ls + yTextWidth - 10, 160)
					ctx.setFontSize(18)
					ctx.setFillStyle('#999999')
					ctx.font = 'normal 18px sans-serif';
					const text = `￥${this.canvasInfo.original}`;
					const textWidth = ctx.measureText(text).width;
					ctx.fillText(text, 180 + (167 - textWidth) / 2 - 10, 190)
					ctx.beginPath();
					ctx.rect(180 + (167 - textWidth) / 2 - 10, 183, textWidth, 2);
					ctx.fillStyle = '#999999';
					ctx.fill();
					ctx.drawImage(this.canvasInfo.buttonImg.path, 190, 205, 133, 47)
					return ctx
				} else {
					console.log('err')
				}
			},
			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			},

			//获取滚动数据
			getgundong(options) {
				var that = this
				that.$api
					.request(
						'goods',
						'getGroupShopUserDO', {
							groupShopId: options.gid ? options.gid : ''
						},
						failres => {
							that.$api.msg(failres.errmsg);
							uni.hideLoading();


						}
					)
					.then(res => {
						that.listgoumai = res.data


					});
			},
			jusuanTwo(e1, e2) {
				return +e1 - +e2;
			},
			jisuan(e1, e2) {
				return +e1 - +e2;
			},
			shezhiTwo(e) {
				if (e == -1) {
					return '暂未设置';
				} else {
					return e;
				}
			},
			shezhi(e) {
				if (e == -1) {
					return '暂未设置';
				} else {
					return e;
				}
			},
			timestampToTimeLong(timestamp) {
				var date = new Date(timestamp);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				this.curStartTime = `${Y}${M}${D}${h}${m}${s}`;
				this.countTime();
			},
			// 倒计时
			countTime() {
				// 获取当前时间
				let date = new Date();
				let now = date.getTime();
				// 设置截止时间
				let endDate = new Date(this.curStartTime); // this.curStartTime需要倒计时的日期
				let end = endDate.getTime();
				// 时间差
				let leftTime = end - now;
				// 定义变量 d,h,m,s保存倒计时的时间
				if (leftTime >= 0) {
					// 天
					this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					// 时
					let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
					this.hour = h < 10 ? '0' + h : h;
					// 分
					let m = Math.floor((leftTime / 1000 / 60) % 60);
					this.min = m < 10 ? '0' + m : m;
					// 秒
					let s = Math.floor((leftTime / 1000) % 60);
					this.second = s < 10 ? '0' + s : s;
				} else {
					this.day = 0;
					this.hour = '00';
					this.min = '00';
					this.second = '00';
				}
				// 等于0的时候不调用
				if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
					return;
				} else {
					// 递归每秒调用countTime方法，显示动态时间效果,
					setTimeout(this.countTime, 1000);
				}
			},
			time(e) {
				let time = +e + 30 * 60 * 1000;
				var date = new Date(time);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				this.curStartTime = `${Y}${M}${D}${h}${m}${s}`;
				this.timestampToTimeLong(time);
				return `${this.hour}:${this.min}:${this.second}`;
			},
			handleCountClick(val, index) {
				this.num = val;
			},
			numberChange(data) {},
			goPintuan() {
				this.showZu = false;
				// 拼团列表拼团
				if (this.showPintuan == true) {
					if (this.num == 0) {
						uni.showToast({
							title: '购买数量不能为零',
							icon: 'none'
						});
						return;
					}
					let c = {
						groupShopNo: this.pintuanitem.groupShopNo,
						createId: this.pintuanitem.creater,
						groupShopId: this.goods.stockDto.groupShopId,
						activityId: this.goods.skuDto.activityId,
						categoryId: this.goods.categoryId,
						categoryIdList: this.goods.categoryIds,
						couponId: 0,
						gmtCreate: this.goods.gmtCreate,
						gmtUpdate: this.goodsgmtUpdate,
						id: this.goods.id,
						num: this.num,
						originalPrice: this.goods.originalPrice,
						price: this.goods.stockDto.price,
						skuId: this.goods.stockDto.skuId,
						skuTitle: this.goods.title,
						spuId: this.goods.stockDto.spuId,
						stock: this.goods.stockDto.stock,
						title: this.goods.title,
						spuImg: this.goods.img,
						vipPrice: this.goods.vipPrice
					};
					let d = [];
					d.push(c);
					uni.setStorageSync('faPintuan', d);
					this.$api.globalData.skuList = d;
					uni.navigateTo({
						url: '../order/create?takeway=cart'
					});
					return;
				}
			},
			//拼团人列表
			wholesale() {
				this.$api.request('groupshopuser', 'getGroupShopUser').then(res => {
					uni.hideLoading();
					this.pintuanList = res.data;
				});
			},
			showPinzu(e) {
				this.pintuanitem = e;

				this.showZu = true;
			},
			shareShowTap() {
				// this.shareShow = 1;
				this.show = true
				// uni.navigateTo({
				// 	url: `/pagesA/share/index?goods=${encodeURIComponent(JSON.stringify(this.goods))}&yaoqingma=${this.yaoqingma}`
				// });
			},
			shareShowTaps() {
				uni.navigateTo({
					url: `/pagesA/share/index?goods=${encodeURIComponent(JSON.stringify(this.goods))}&yaoqingma=${this.yaoqingma}`
				});
			},
			//统计购物车数量
			countCart() {
				this.$api
					.request('cart', 'countCart')
					.then(res => {
						this.cartNum = res.data;
					})
					.catch(err => {
						this.$api.msg('请求失败，请稍后再试');
					});
			},
			//切换到购物车页面
			navCart() {
				if (this.showPintuan == true) {
					return;
				}
				uni.switchTab({
					url: '../cart/cart'
				});
			},
			//分享{
			share(type) {
				console.log(type);
				if (type == 'miniwechat') {
					uni.showShareMenu({
						title: (this.goods.groupShop ? '立即拼团-' : '好货分享-') + this.goods.title,
						imageUrl: this.goods.img,
						path: '/pages/product/detail?id=' + this.goods.id + (this.goods.groupShop ? '&gid=' + this.goods.groupShop.id :
							'')
					});
				}
			},
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer);
			},
			toggleMask1(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.shareShow = 2;
				setTimeout(() => {
					this.shareShow = state;
				}, timer);
			},
			//领取优惠券
			obtainCoupon(index) {
				const that = this;
				that.$api
					.request('coupon', 'obtainCoupon', {
						couponId: that.couponList[index].id
					})
					.then(res => {
						that.$api.msg('领取成功');
						that.couponList[index].nowCount++;
						that.toggleMask();
					});
			},
			//规格弹窗开关
			toggleSpec(e) {
				if (this.specClass === 'show') {
					this.specClass = 'hide';

					setTimeout(() => {
						this.specClass = 'none';
						if (this.toggleCallback) {
							this.toggleCallback();
							this.toggleCallback = undefined;
						}
					}, 150);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
					if (!this.selectedSku.title) {
						this.selectedSku = this.goods.skuList[0];
						this.selectedSkuIndex = 0;
					}
				}
			},
			//选择规格
			selectSpec(skuItem, skuIndex) {
				this.selectedSku = skuItem;
				this.selectedSkuIndex = skuIndex;
			},
			addkucun() {
				uni.showToast({
					title: '库存不足啦',
					icon: 'none'
				});
			},
			//加入购物车
			addCart(e) {
				console.log('点击')
				if (this.showPintuan == true) {
					console.log(this.goods);
					if (this.num == 0) {
						uni.showToast({
							title: '购买数量不能为零',
							icon: 'none'
						});
						return;
					}
					let c = {
						groupShopNo: '',
						createId: '',
						groupShopId: this.goods.stockDto.groupShopId,
						activityId: this.goods.skuDto.activityId,
						categoryId: this.goods.categoryId,
						categoryIdList: this.goods.categoryIds,
						couponId: 0,
						gmtCreate: this.goods.gmtCreate,
						gmtUpdate: this.goodsgmtUpdate,
						id: this.goods.id,
						num: this.num,
						originalPrice: this.goods.originalPrice,
						price: this.goods.stockDto.price,
						skuId: this.goods.stockDto.skuId,
						skuTitle: this.goods.title,
						spuId: this.goods.stockDto.spuId,
						stock: this.goods.stockDto.stock,
						title: this.goods.title,
						spuImg: this.goods.img,
						vipPrice: this.goods.vipPrice
					};
					let d = [];
					// console.log(d);
					d.push(c);
					// console.log(d);
					uni.setStorageSync('faPintuan', d);
					this.$api.globalData.skuList = d;
					uni.navigateTo({
						url: '../order/create?takeway=cart'
					});

					return;
				}

				//不再按规格
				const that = this;
				that.$api
					.request('cart', 'addCartItem', {
						skuId: that.goods.stockDto.skuId,
						activityId: that.goods.skuDto.activityId,
						couponId: that.goods.skuDto.couponId,
						num: 1
					})
					.then(res => {
						if (that.goods.groupShop) {
							that.$api.msg('从购物车结算不会参加团购');
						} else {
							that.$api.msg('添加购物车成功');
							this.cartNum++;
							that.$store.commit('addCart', this.cartNum);
							uni.setTabBarBadge({
								index: 2,
								text: this.cartNum + ''
							});
						}
					});
				return;
				if (!that.selectedSku.id) {
					that.specClass = 'none';
					that.toggleSpec();
					that.toggleCallback = that.addCart;
				} else {
					//添加到购车车
					that.$api
						.request('cart', 'addCartItem', {
							skuId: that.selectedSku.id,
							num: 1
						})
						.then(res => {
							if (that.goods.groupShop) {
								that.$api.msg('从购物车结算不会参加团购');
							} else {
								that.$api.msg('添加购物车成功');
							}
						});
				}
			},
			//收藏
			toFavorite() {
				const that = this;
				if (that.goods.collect) {
					//取消收藏
					that.goods.collect = false;
					this.$api
						.request('collect', 'deleteCollect', {
							spuId: that.goods.id
						})
						.then(res => {
							this.$api.msg('已取消收藏');
						});
				} else {
					//添加收藏
					that.goods.collect = true;
					this.$api
						.request('collect', 'addCollect', {
							spuId: that.goods.id
						})
						.then(res => {
							this.$api.msg('已收藏');
						});
				}
			},
			buy() {
				const that = this;
				if (!that.selectedSku.id) {
					that.specClass = 'none';
					that.toggleSpec();
					that.toggleCallback = that.buy;
				} else {
					let skuItem = {
						skuId: that.selectedSku.id,
						num: 1,
						title: that.goods.title,
						originalPrice: that.selectedSku.originalPrice,
						price: that.selectedSku.price,
						vipPrice: that.selectedSku.vipPrice,
						skuTitle: that.selectedSku.title,
						spuImg: that.goods.img,
						skuImg: that.selectedSku.img,
						stock: that.selectedSku.stock,
						spuId: that.goods.id,
						categoryId: that.goods.categoryId,
						categoryIdList: that.goods.categoryIds
					};
					if (that.goods.groupShop) {
						skuItem['groupShopId'] = that.goods.groupShop.id;
					}
					let skuList = [1];
					skuList[0] = skuItem;
					that.$api.globalData.skuList = skuList;
					uni.navigateTo({
						url: `/pages/order/create?takeway=buy`
					});
				}
			},
			//查看所有评价
			navAllAppraise() {
				uni.navigateTo({
					url: `/pages/product/appraise?spuid=${this.goods.id}&firstpage=${JSON.stringify(this.goods.appraisePage)}`
				});
			},
			timeFormat(time) {
				var date = new Date(parseInt(time));
				var month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + parseInt(date.getMonth() + 1);
				var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
				return date.getFullYear() + '-' + month + '-' + day;
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	// 拼团信息
	pintuanxinxi {
		text-align: center;
		background: red;
		margin-top: 16rpx;
		height: 80rpx;
		width: 750rpx;

	}

	.kucunbu {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		background: #C0C4CC;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.faqipintuan {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		background: #36B542;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.badge {
		background-color: #ff473c;
		width: 32rpx;
		height: 32rpx;
		color: #fff;
		font-size: 22rpx;
		line-height: 32rpx;
		text-align: center;
		position: absolute;
		left: 42rpx;
		bottom: 32rpx;
		color: #FFFFFF;
	}

	.bg-gradual-orange {
		background-image: linear-gradient(180deg, #fe9f43, #fc6620);
		color: #fff;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 414rpx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 32rpx 34rpx 0 30rpx;

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: 28rpx;
			line-height: 40rpx;
			/* margin-left: 10upx; */
			color: #8d8e99;
			font-weight: bold;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 28upx 6rpx 34rpx 8rpx;
			position: relative;
		}

		.tit {
			width: 140upx;
			font-size: 28rpx;
			line-height: 40rpx;
			/* margin-left: 10upx; */
			color: #8d8e99;
			font-weight: 550;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}



	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		width: 750upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 60%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, 0.5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: 0.3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, 0.4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $base-color;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}

	.rich-img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		line-height: 0px;
	}

	button::after {
		border: none;
	}

	.mee {

		// position: relative;
		// border: 1rpx solid #36B542;
		// border-radius: 999rpx;
		// margin-right: 10px;
		// .ding{
		// 	top: 0;
		// 	left: -20%;
		// 	position: absolute;
		// 	width: 56rpx;
		// 	height: 32rpx;
		// 	background-color: #36B542;
		// 	color: #FFFFFF;
		// 	font-size: 20rpx;
		// 	border-radius: 999rpx;
		// 	text-align: center;
		// }
		image {
			width: 100%;
			height: 200px;
		}
	}

	.pintuan {
		margin-top: 20rpx;
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		overflow: hidden;
		padding: 20rpx 28rpx;

		.tet {
			margin-left: 150rpx;
			margin-top: 10rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.ttx {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 140rpx;
			// background-color: red;
		}

		.pintuanitem {
			// width: 100%;
			// height:100%;
			// background-color: blue;
			display: flex;
			align-items: center;
			font-size: 32rpx;

			font-weight: 400;
			color: #333333;

			// justify-content: space-between;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 9999px;
				margin-right: 16rpx;
			}

			.btn {
				width: 140rpx;
				height: 64rpx;
				background-color: #36b542;
				border-radius: 10rpx;
				align-items: center;
				line-height: 64rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
			}
		}
	}

	.msge {
		.dingwei {
			width: 52rpx;
			height: 52rpx;
			position: absolute;

			top: -26rpx;
			right: -26rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		position: relative;
		position: fixed;
		z-index: 10;
		top: 50%;
		left: 50%;
		width: 520rpx;
		height: 448rpx;
		border-radius: 16rpx;
		/* height: 100rpx; */
		transform: translate(-50%, -50%);
		background-color: #ffffff;

		.txt {
			width: 100%;
			text-align: center;
			margin-top: 48rpx;
			// margin-bottom: 20rpx;
			font-size: 32rpx;

			font-weight: 500;
			color: #333333;
		}

		.typ {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 16rpx;
		}

		.imageList {
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			align-items: center;
			margin-top: 32rpx;

			.meyt {
				width: 50px;
				height: 50px;
				position: relative;
				border: 1rpx solid #36b542;
				border-radius: 999rpx;
				margin-right: 10px;

				.ding {
					top: 0;
					left: -20%;
					position: absolute;
					width: 56rpx;
					height: 32rpx;
					background-color: #36b542;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 999rpx;
					text-align: center;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			image {
				width: 50px;
				height: 50px;
				border-radius: 999px;
				margin-right: 10rpx;
			}
		}

		.but {
			width: 90%;
			margin: 0 auto;
			// background-color: yellow;
			// width: 500px;
			height: 80rpx;
			line-height: 80rpx;
			background: #36b542;
			color: #ffffff;
			font-size: 32rpx;
			border-radius: 4px;
			// border-radius: 999px;
			text-align: center;
		}
	}

	.box {
		width: 100%;
		height: 90rpx;
		background-color: red;
	}

	.meng {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.loading {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background-color: #FFFFFF;
		z-index: 1000;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.canvas-y {
		position: fixed;
		left: 1000rpx;
	}

	.popup {
		position: fixed;
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);

		&-main {
			position: absolute;
			bottom: 0;
			background-color: #FFFFFF;
			width: 750rpx;
			height: 350rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				display: flex;
				flex-direction: column;
				background: none;
				border: none;
				height: 200rpx;
				justify-content: center;
				align-items: center;

				text {
					padding-top: 20rpx;
				}

				&::after {
					border: none;
					height: 50rpx;
				}

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background-color: rgba(255, 255, 255, 1);
		padding: 30rpx 24rpx 20rpx 24rpx;
		box-shadow: 0 0 15rpx #f0f0f0;
		display: flex;
		align-items: center;
		z-index: 999;

		&-img {
			width: 700rpx;
			height: 90rpx;
		}

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			&:last-child {
				margin-left: 90rpx;
			}

			image {
				width: 50rpx;
			}

			text {
				font-size: 13px;
				padding-top: 5rpx;
			}

			.number {
				position: absolute;
				right: -20rpx;
				top: -20rpx;

				text {
					position: absolute;
					font-size: 11px;
					background-color: red;
					color: #FFFFFF;
					// border: 1px solid #E04C20;
					// color: #E04C20;
					min-height: 35rpx;
					/*改后新增的代码*/
					min-width: 45rpx;
					line-height: 24rpx;
					right: 5rpx;
					top: 0rpx;
					text-align: center;
					-webkit-border-radius: 24rpx;
					border-radius: 24rpx;
					padding: 8rpx;
					color: #FFFFFF;
				}
			}
		}

		&-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.price {
				font-size: 13px;
			}

			.text-l {
				color: #36B542;
			}

			.submit {
				width: 330rpx;
				margin-left: 15rpx;
				color: #FFFFFF;
				background-color: #36B542;
				border-radius: 35rpx;
				padding: 15rpx 40rpx;
				text-align: center;
				line-height: 45rpx;
				font-size: 16px;
			}
		}

		.arrow-icon {
			width: 15rpx;
		}

		.margin-left {
			margin-left: 40rpx;
		}
	}
</style>
